<template>
  <div class="test-page">
    <n-card title="功能测试导航">
      <n-space vertical size="large">
        <n-text>选择要测试的功能：</n-text>
        
        <n-grid :cols="1" :x-gap="16" :y-gap="16">
          <!-- 视频播放测试 -->
          <n-card hoverable @click="goToTest('/video-test')" class="test-card">
            <n-space vertical align="center">
              <n-icon size="48" color="#18a058">
                <VideoIcon />
              </n-icon>
              <n-text strong>视频播放测试</n-text>
              <n-text size="small" type="secondary">
                测试 ArtPlayer 视频播放功能
              </n-text>
            </n-space>
          </n-card>
        </n-grid>

        <!-- 快速跳转按钮 -->
        <n-divider />
        <n-space justify="center">
          <n-button @click="goToTest('/')" type="primary">
            返回首页
          </n-button>
          <n-button @click="goToTest('/talk')" type="info">
            查看说说列表
          </n-button>
        </n-space>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { 
  Videocam as VideoIcon,
  Image as ImageIcon,
  Pricetag as PricetagIcon,
  CloudUpload as CloudUploadIcon,
  Chatbubble as ChatbubbleIcon,
  Person as PersonIcon
} from '@vicons/ionicons5'

const router = useRouter()

const goToTest = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.test-card:active {
  transform: translateY(-2px);
}
</style>
